<template>
    <div class="publik-file-wrapper">
        <div class="layout-title-wrapper">
            <file-upload></file-upload>
        </div>
        <ul class="layout-grid-wrapper" ref="watchfile">
            <li class="grid-item"
                v-for="item in folderList" :key="item.id"
                @click="onPrivateFile(item.id)"
            >
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="120" height="120" style="fill: #101010;">
                    <path d="M527.943 224H480v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h400a48.001 48.001 0 0 0 40.704-22.56l79.942-128c19.948-31.917-3.038-73.44-40.703-73.44zM54 112h134.118l64 64H426a6 6 0 0 1 6 6v42H152a48 48 0 0 0-41.098 23.202L48 351.449V117.993A5.993 5.993 0 0 1 54 112zm394 288H72l77.234-128H528l-80 128z"></path>
                </svg>
                <span class="file-name">{{item.folderName}}</span>
            </li>
            <li class="grid-item grid-item-add" @click="addFileName">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="74" height="74" style="fill: #101010;">
                    <path d="M29.714 15.086h-12.8v-12.8h-2.286v12.8h-12.57v2.286h12.571v12.57h2.286v-12.57h12.8z"></path>
                </svg>
            </li>
        </ul>
        <div class="share-wrapper">
            <div class="layout-title-wrapper">
                <file-upload name="文件共享区" title="本区域用于用户共享文件" :show-upload="true" @onupload="onupload"></file-upload>
            </div>
            <div class="search-public-file">
                <label class="iconfont" for="serach">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="24" height="24" style="fill: rgba(142,142,147,1);">
                        <path d="M955.417 913.102l-249.886-249.9c61.4-64.646 99.27-151.765 99.27-247.893 0-199.052-161.358-360.413-360.4-360.413-199.049 0-360.417 161.361-360.417 360.413 0 199.01 161.368 360.405 360.417 360.405 79.18 0 152.221-25.852 211.692-69.17l252.931 252.949c12.85 12.813 33.524 12.813 46.365 0 12.84-12.876 12.84-33.552.028-46.391zM444.4 717.033c-162.849 0-294.891-132.038-294.891-294.884 0-162.873 132.042-294.878 294.891-294.878 162.869 0 294.874 132.043 294.874 294.878 0 162.818-132.004 294.884-294.874 294.884z"/>
                    </svg>
                </label>
                <div class="search-wrapper">
                    <input class="search-input" v-model="searchfile" @keyup.enter="searchFile" type="text" id="serach" placeholder="搜索">
                    <span class="search-close"></span>
                </div>
            </div>
            <ul class="layout-grid-wrapper public-grid-wrapper" v-show="!isIntroduce">
                <li class="grid-item public-item"
                    v-for="item in pagePublicList.PageInfo"
                    :key="item.id"
                    @click="onintroduce(item)"
                >
                    <h1 class="file-name">{{item.oldName}}</h1>
                    <p class="file-content">{{item.introduction}}</p>
                    <span class="down-num">下载量：{{item.uploadNum}}</span>
                </li>
            </ul>
            <div class="pagination" v-show="!isIntroduce">
                <el-pagination
                        @current-change="handleCurrentChange"
                        background
                        :hide-on-single-page="true"
                        :page-size="12"
                        layout="prev, pager, next"
                        :total="pagePublicList.TotalSize">
                </el-pagination>
          </div>
          <div class="introduce-wrapper" v-show="isIntroduce">
                <div class="back-nav" ref="backnav" @click="backnav">
                    <span style="cursor: pointer">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="24" height="24" style="fill: #101010;">
                           <path d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path>
                        </svg>
                    </span>
                </div>
                <h1 class="introduce-name">{{introduceInfo.oldName || '文件'}}</h1>
                <div class="introduce-content" v-html="introduceInfo.introduction"></div>
                <div class="introduce-btn">
                    <button disabled>在线预览</button>
                    <button v-down-url="introduceInfo.httpUrl">点击下载</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import FileUpload from '../../base/file-upload/FileUpload'
    import {messageMixin} from "../../common/js/mixin";
    import { createFolder, getMyFolder, getPublicFile, searchFile } from "../../api/file";
    import { ERROR_NO } from "../../util/config";
    import { getUserInfo } from "../../common/js/cache";
    export default {
        mixins: [messageMixin],
        data () {
            return {
                folderList: [],
                pagePublicList: [],
                isIntroduce: false,
                introduceInfo: {},
                searchfile: '',
                page: 1
            }
        },
        methods: {
            onupload () {
                this.$router.push({
                    path: '/file/upload',
                    query: {
                        path: 'public',
                    }
                })
            },
            onPrivateFile (id) {
                this.$router.push({path: '/file/private', query: {folderId: id}})
            },
            addFileName () {
               this.$prompt('新建文件夹名字', {
                   inputPlaceholder: '单行输入',
                   roundButton: true,
                   showConfirmButton: true,
                   showCancelButton: true,
                   closeOnClickModal: false
               }).then((res) => {
                   const val = res.value
                   console.log(!val)
                   if (!val) {
                       this._messge({
                           message: '输入不能为空',
                           type: 'error'
                       })
                       this.addFileName()
                       return
                   }
                   this._createFolder({
                       folderName: val,
                       folderLevel: 1,
                       superiorFolderId: this.userInfo.id
                   })
               }).catch(e => {
                   console.log(e)
               })
            },
            searchFile () {
                const searchfile = this.searchfile
                if (!searchfile) {
                    this._messge({
                        message: '搜索内容不能为空',
                        type: 'error'
                    })
                    return
                }
                if (this.timer) {
                    return
                }
               this.timer = setTimeout(() => {
                    this._searchFile({
                        name: searchfile,
                        page: this.page
                    })
                })
            },
            handleCurrentChange (page) {
                this.page = page
                this._getPublicFile({ page })
            },
            backnav () {
                this.isIntroduce = false
            },
            onintroduce (introduceInfo) {
                this.isIntroduce = true
                this.introduceInfo = introduceInfo
            },
            _createFolder (data, val) {
                createFolder(data).then(res => {
                    if (res.code === ERROR_NO) {
                        this.folderList.push({
                            folderName: val,
                            id: res.data.folderId
                        })
                        return
                    }
                    this._messge({
                        message: res.message,
                        type: 'error'
                    })
                })
            },
            _getMyFolder () {
                getMyFolder().then(res => {
                    if (res.code === ERROR_NO) {
                        this.folderList = res.data.folderList
                    }
                })
            },
            _getPublicFile ({page= 1, pageSize= 12} = {}) {
                getPublicFile({page, pageSize}).then(res => {
                    if (res.code === ERROR_NO) {
                        const pageInfo = res.data.res.PageInfo
                        pageInfo.map(item => {
                           item.uploadNum = (Math.random()*100 >> 0) + 1
                        })
                        this.pagePublicList = res.data.res
                    }
                })
            },
            _searchFile ({name, page= 1, pageSize= 12} = {}) {
                searchFile({name, page, pageSize}).then(res => {
                    clearTimeout(this.timer)
                    if (res.code === ERROR_NO) {
                        if (!res.data.res.TotalSize) {
                            this._messge({
                                message: '搜索内容为空'
                            })
                        } else {
                            this.pagePublicList = res.data.res
                        }
                    }
                    this.searchfile = ''
                })
            }
        },
        created () {
            this._getMyFolder()
            this._getPublicFile()
            this.userInfo = getUserInfo()
        },
        components: {
            FileUpload
        }
    }
</script>

<style scoped lang="scss">
    @import "./src/common/scss/variable";
    @import "./src/common/scss/mixin";
    .layout-title-wrapper {
        cursor: pointer;
    }
    .public-grid-wrapper {
        min-height: 650px;
    }
    .layout-grid-wrapper {
        margin: 24px auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-column-gap: 51px;
        grid-row-gap: 40px;
        grid-auto-flow: row dense;
        transition: all 500ms;
        .grid-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 190px;
            border-radius: 20px;
            color: $color-font;
            font-size: 14px;
            border: 1px solid $border-color;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 13px 15px rgba(31, 45, 61, 0.15);
            transition: all 250ms;
            &:hover {
                opacity: .95;
                transform: translateY(7px);
                box-shadow: 0 3px 5px rgba(31, 45, 61, 0.2);
            }
        }
        .public-item {
            align-items: start;
            justify-content: start;
            padding: 15px 24px;
            box-sizing: border-box;
            .file-name {
                @include no-wrap();
                width: 100%;
                margin-bottom: 7px;
                line-height: 42px;
                color: $font-gray;
                font-size: 28px
            }
            .file-content {
                word-break: break-all;
                @include overflow-ell(3);
                width: 100%;
                overflow: hidden;
                height: 90px;
                line-height: 21px;
                color: $font-gray;
                font-size: 14px
            }
            .down-num {
                align-self: flex-end;
                line-height: 18px;
                font-size: 12px;
            }
        }
    }
    .search-public-file {
        margin: 24px 0;
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
        padding: 12px 30px;
        box-sizing: border-box;
        border-radius: 20px;
        border: 1px solid $border-color;
        box-shadow: 0 13px 15px rgba(31, 45, 61, 0.15);
        transition: all 250ms;
        &:hover {
            opacity: .95;
            transform: translateY(7px);
            box-shadow: 0 3px 5px rgba(31, 45, 61, 0.2);
        }
        .iconfont {
            position: absolute;
            top: 23px;
            left: 20px;
            z-index: 6;
        }
        .search-wrapper {
            width: 100%;
            position: relative;
            .search-input {
                width: 100%;
                height: 44px;
                padding: 0 25px;
                font-size: 24px;
                border-radius: 5px;
                box-sizing: border-box;
                color: $font-gray;
                border: 0;
                background-color: #ffffff;
                &:focus {
                    outline: none;
                }
            }
            .search-close::after {
                content: 'x';
                position: absolute;
                top: 50%;
                right: -4px;
                width: 28px;
                height: 28px;
                transform: translate(-50%, -50%);
                border-radius: 50%;
                text-align: center;
                font-size: 20px;
                color: #ffffff;
                background-color: rgb(143, 142, 148);
                cursor: pointer;
            }
        }
        .search-cancel {
            padding: 4px 0;
            margin-left: 8px;
            line-height: 18px;
            color: rgb(0, 118, 255);
            font-size: 11px;
            cursor: pointer;
        }
    }
    .pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 25px;
    }
    .introduce-wrapper {
        height: 493px;
        margin: 40px 0;
        padding: 21px 50px;
        box-sizing: border-box;
        color: $font-gray;
        font-size: 14px;
        border-radius: 20px;
        border: 1px solid $border-color;
        box-shadow: 0 13px 15px rgba(31, 45, 61, 0.15);
        transition: all 250ms;
        &:hover {
            opacity: .95;
            transform: translateY(7px);
            box-shadow: 0 3px 5px rgba(31, 45, 61, 0.2);
        }
        .back-nav {
            margin-bottom: 20px;
        }
        .introduce-name {
            line-height: 42px;
            color: rgba(16, 16, 16, 100);
            font-size: 28px;
            margin-bottom: 36px;
        }
        .introduce-content {
            height: 213px;
            color: rgba(16, 16, 16, 100);
            font-size: 14px;
        }
        .introduce-btn {
            margin-top: 28px;
            width: 100%;
            text-align: end;
            button {
                width: 186px;
                height: 65px;
                line-height: 20px;
                border-radius: 20px;
                color: $font-gray;
                font-size: 14px;
                background-color: transparent;
                border: 1px solid $border-color;
                margin-left: 30px;
                cursor: pointer;
                &:hover {
                    opacity: .85;
                    border-color: #0099ff;
                }
            }
        }
    }
</style>
